import React, { PureComponent } from "react";
import { connect } from "dva";
import Link from 'umi/link';
import { Modal, Row, Col, Cascader, Select, Form } from "antd";
const { Option } = Select;



export default class RegionalSelection extends PureComponent {
  constructor(props) {
    super(props);
    const value = props.value || {};
    this.state = {
      maintenanceId: value.maintenanceId || 0,
      userId: value.userId || 0,
    };
  }

  componentDidMount() {

  }


  componentWillReceiveProps(nextProps) {
    // Should be a controlled component.
    if ('value' in nextProps) {
      const value = nextProps.value;
      this.setState(value);
    }
  }

  handleSearchParent = (maintenanceId) =>{
    if(maintenanceId){
      if (!('value' in this.props)) {
        this.setState({maintenanceId});
      }
      this.triggerChange({ maintenanceId, loadData:true });

    }else{
      // 清空操作
      if (!('value' in this.props)) {
        this.setState({
          maintenanceId:0,
          userId:0,
        });
      }
      this.triggerChange({
        maintenanceId:0,
        userId:0,
        loadData:false,
      });

    }
  }

  handleSearchChildren = (userId) =>{
    if(userId){
      if (!('value' in this.props)) {
        this.setState({userId});
      }
      this.triggerChange({ userId, loadData:false });

    }else{
      // 清空操作
      // 清空操作
      if (!('value' in this.props)) {
        this.setState({
          userId:0,
        });
      }
      this.triggerChange({
        userId:0,
        loadData:false,
      });

    }
  }


  triggerChange = (changedValue) => {
    // Should provide an event to pass value to Form.
    const onChange = this.props.onChange;
    if (onChange) {
      onChange(Object.assign({}, this.state, changedValue), this.state);
    }
  }




  render() {
    const { maintainData, personnelData ,span, placeholder, Mplaceholder } = this.props;
    const { maintenanceId, userId} = this.state;

    // console.log('userId',userId)
    // console.log('personnelData',personnelData)

    return (
      <Row gutter={{ md: 8, lg: 24, xl: 48 }} style={{height:55}}>
        <Col md={span ? span : 12}  style={{paddingRight:span ? span : 6}}>
              <Select
                placeholder={Mplaceholder ? Mplaceholder : '请选择维保单位'}
                value={maintenanceId===0 ? undefined : maintenanceId}
                onChange={this.handleSearchParent}
                allowClear={true}
                // getPopupContainer={triggerNode => triggerNode.parentNode}
              >
                {maintainData && maintainData.length>0 && maintainData.map(item => (
                  <Option key={item.maintenanceId} value={item.maintenanceId}>{item.maintenanceName}</Option>
                ))}
              </Select>
        </Col>
        <Col md={span ? span : 12}  style={{paddingLeft:span ? span : 6}}>
              <Select
                placeholder={placeholder ? placeholder : '请选择相关人员'}
                value={userId===0 ? undefined : userId}
                disabled={maintenanceId!==0 && personnelData && personnelData.length>0 ? false : true}
                onChange={this.handleSearchChildren}
                // allowClear={true}
                // getPopupContainer={triggerNode => triggerNode.parentNode}
              >
                {personnelData && personnelData.length>0 && personnelData.map(item => (
                  <Option key={item.userId} value={item.userId}>{item.realName}</Option>
                ))}
              </Select>
        </Col>
      </Row>
    );
  }
}
